<template>
  <view class="coupon-container">
    <view class="page-title">我的优惠券</view>
    
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <!-- 折扣券 1 -->
      <!-- <view class="coupon-card discount-coupon" hover-class="coupon-hover">
        <view class="coupon-left">
          <view class="discount-rate">8.5折</view>
          <view class="discount-desc">全场通用折扣券</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-condition">满100元可用</view>
          <view class="coupon-expiry">有效期至: 2025-12-31</view>
          <view class="coupon-tag">限时</view>
        </view>
      </view> -->

      <!-- 折扣券 2 -->
      <!-- <view class="coupon-card discount-coupon" hover-class="coupon-hover">
        <view class="coupon-left">
          <view class="discount-rate">9折</view>
          <view class="discount-desc">离焦镜专区折扣券</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-condition">满50元可用</view>
          <view class="coupon-expiry">有效期至: 2025-11-15</view>
          <view class="coupon-tag">镜片</view>
        </view>
      </view> -->

      <!-- 立减券 -->
      <!-- <view class="coupon-card cash-coupon" hover-class="coupon-hover">
        <view class="coupon-left">
          <view class="cash-amount">¥20</view>
          <view class="cash-desc">立减券</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-condition">满150元可用</view>
          <view class="coupon-expiry">有效期至: 2025-12-01</view>
          <view class="coupon-tag">热门</view>
        </view>
      </view> -->
      <!-- 无优惠券 -->
      <view v-if="couponList.length === 0" class="empty-container">
        <view class="no-coupon">您还没有优惠券</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        couponList: []
        // 可以留空，因为是静态页面
      }
    },
    methods: {
      // 可以添加点击优惠券的事件处理
      onCouponClick() {
        // 实际项目中可以添加跳转或使用优惠券的逻辑
      }
    }
  }
</script>

<style scoped>
  .coupon-container {
    padding: 20rpx;
    background-color: #f8f8f8;
    min-height: 100vh;
  }

  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    margin: 20rpx 0 30rpx;
    color: #333;
  }

  .coupon-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .coupon-card {
    display: flex;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 180rpx;
  }

  .coupon-hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .coupon-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    position: relative;
    z-index: 1;
  }

  .coupon-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20rpx;
    background-color: #fff;
    position: relative;
  }

  .coupon-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10rpx;
    bottom: 10rpx;
    width: 1rpx;
    background-color: rgba(255, 255, 255, 0.3);
  }

  /* 折扣券样式 */
  .discount-coupon .coupon-left {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    color: #fff;
  }

  .discount-rate {
    font-size: 60rpx;
    font-weight: bold;
    line-height: 1;
  }

  .discount-desc {
    font-size: 24rpx;
    margin-top: 10rpx;
  }

  /* 立减券样式 */
  .cash-coupon .coupon-left {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
  }

  .cash-amount {
    font-size: 60rpx;
    font-weight: bold;
    line-height: 1;
  }

  .cash-desc {
    font-size: 24rpx;
    margin-top: 10rpx;
  }

  .coupon-condition {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 8rpx;
  }

  .coupon-expiry {
    font-size: 24rpx;
    color: #999;
  }

  .coupon-tag {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
  }

  /* 添加装饰性元素 */
  .coupon-card::after {
    content: '';
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: #f8f8f8;
    top: 70rpx;
    right: -20rpx;
    z-index: 2;
  }

.empty-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.no-coupon {
  font-size: 16px;
  color: #999;
  text-align: center;
}
</style>